<template>
  <div class="page">
    <el-pagination @size-change="changeSize"
                   @current-change="changeCurrent"
                   :current-page="pageOpts.curPage"
                   :page-sizes="[10,20,30]"
                   :page-size="pageOpts.limit"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageOpts.total"
                   background />
  </div>
</template>
<script>
export default {
  props: {
    pageOpts: Object
  },
  methods: {
    changeSize(limit) {
      this.$emit("page-change", { ...this.pageOpts, limit });
    },
    changeCurrent(curPage) {
      const offset = (curPage - 1) * this.pageOpts.limit;
      this.$emit("page-change", { ...this.pageOpts, curPage, offset });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 25px;
}
</style>

